<template>
  <div>
    <zbTable
      ref="tableRef"
      :api-fun="get_list"
      @getselection="getselection"
      @action="action"
    >
      <template #toolbar>
        <template v-if="delArrShow">
          <a-space>
            <a-button class="ele-btn-icon" @click="delArrHide()"
              ><span>取消</span></a-button
            >
            <a-button
              type="primary"
              danger
              ghost
              class="ele-btn-icon"
              @click="delFun()"
              ><span>确认删除</span></a-button
            >
          </a-space>
        </template>
      </template>
    </zbTable>

    <user-edit
      v-if="showEdit"
      v-model:visible="showEdit"
      :actionStatus="actionStatus"
      :editDataId="editDataId"
      @done="done"
    />
    <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="460"
      @ok="delFun"
    >
      <p>此操作将永久删除您选中的用户, 是否继续?</p>
    </a-modal>
    <!-- 模板导入弹窗 -->
    <exportTemplate
      v-if="visible"
      v-model:visible="visible"
      @done="daoru"
      @download="daochu"
    />
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import {
    PlusOutlined,
    UploadOutlined,
    DownOutlined,
    ClearOutlined,
    RestOutlined,
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import zbTable from './components/table.vue';
  import userEdit from './components/user-edit.vue';
  import exportTemplate from '@/components/jewelry/exportTemplate.vue';
  import { get_list, delArr, import_member } from '@/api/member/get_list';
  // 获取子组件
  const tableRef = ref(null);
  const router = useRouter();
  const { push } = useRouter();

  const showEdit = ref(false);
  const editDataId = ref(null);
  const actionStatus = ref('add');
  const actionData = ref({});
  const popconfirm = ref(false);
  const delArrData = ref([]);
  const delArrShow = ref(false); //批量删除确认弹框
  const visible = ref(false);

  /* 打开编辑弹窗 */
  const action = (data) => {
    if (data.action_data.type == 'add') {
      showEdit.value = true;
      actionData.value = data.row_data;
    }
    if (data.action_data.type == 'edit') {
      actionData.value = data.action_data;
      editDataId.value = data.row_data.id;
      actionStatus.value = 'edit';
      showEdit.value = true;
    }
    if (data.action_data.type == 'detail') {
      actionData.value = data.action_data;
      editDataId.value = data.row_data.id;
	  let r = router.currentRoute.value.path.split('/');
	  let newUrl = `/${r[1]}/${r[2]}/detail`;
	  push({
	    path: newUrl,
	    query: { id: editDataId.value }
	  });
    }
    if (data.action_data.type == 'delete') {
      actionData.value = data.action_data;
      delArrShow.value = true;
      tableRef.value.changeSelection(true);
    }
    if (data.action_data.type == 'import') {
      actionData.value = data.row_data;
      visible.value = true;
    }
  };
  const delArrHide = () => {
    tableRef.value.changeSelection(false);
    delArrShow.value = false;
  };
  //获取选中的行
  const getselection = (val) => {
    delArrData.value = [];
    val.value.map((item) => {
      delArrData.value.push(item.id);
    });
  };
  const delFun = () => {
    delArr({ id: delArrData.value })
      .then((res) => {
        message.success(res.msg);
        popconfirm.value = false;
        reloadTable();
      })
      .catch((e) => {
        message.error(e);
        loading.value = false;
      });
  };
  const done = (form) => {
    console.log(form);
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
    delArrShow.value = false;
    tableRef.value.reload();
  };

  const daoru = (data) => {
    console.log('data', data);
    import_member(data)
      .then((res) => {
        reloadTable();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e || '上传失败');
      });
  };
  const daochu = () => {
    let data = {
      url: 'member/member/import_member_template',
      params: {}
    };
    daochuFn(data);
  };
</script>
